<template>
  <div class="dashboard-container">
    <!-- 数据概览卡片 -->
    <el-row :gutter="20" class="mb-6">
      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <div class="stat-card">
          <div class="stat-icon user-icon">
            <IconifyIconOffline icon="ep:user" />
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ userStats.total }}</div>
            <div class="stat-label">总用户数</div>
            <div class="stat-change positive">+{{ userStats.growth }}%</div>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <div class="stat-card">
          <div class="stat-icon activity-icon">
            <IconifyIconOffline icon="ep:calendar" />
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ activityStats.total }}</div>
            <div class="stat-label">活动总数</div>
            <div class="stat-change positive">+{{ activityStats.growth }}%</div>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <div class="stat-card">
          <div class="stat-icon event-icon">
            <IconifyIconOffline icon="ep:trophy" />
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ eventStats.total }}</div>
            <div class="stat-label">赛事总数</div>
            <div class="stat-change positive">+{{ eventStats.growth }}%</div>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <div class="stat-card">
          <div class="stat-icon revenue-icon">
            <IconifyIconOffline icon="ep:money" />
          </div>
          <div class="stat-content">
            <div class="stat-number">¥{{ revenueStats.total }}</div>
            <div class="stat-label">总收入</div>
            <div class="stat-change positive">+{{ revenueStats.growth }}%</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="mb-6">
      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>用户增长趋势</span>
              <el-button-group>
                <el-button
                  size="small"
                  :type="chartPeriod === '7d' ? 'primary' : ''"
                  @click="chartPeriod = '7d'"
                  >7天</el-button
                >
                <el-button
                  size="small"
                  :type="chartPeriod === '30d' ? 'primary' : ''"
                  @click="chartPeriod = '30d'"
                  >30天</el-button
                >
                <el-button
                  size="small"
                  :type="chartPeriod === '90d' ? 'primary' : ''"
                  @click="chartPeriod = '90d'"
                  >90天</el-button
                >
              </el-button-group>
            </div>
          </template>
          <div ref="userTrendChart" class="chart-container" />
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card class="chart-card">
          <template #header>
            <span>活动类型分布</span>
          </template>
          <div ref="activityTypeChart" class="chart-container" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷操作和最新动态 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card class="quick-actions-card">
          <template #header>
            <span>快捷操作</span>
          </template>
          <div class="quick-actions">
            <div class="action-item" @click="$router.push('/activity/create')">
              <div class="action-icon create-activity">
                <IconifyIconOffline icon="ep:plus" />
              </div>
              <div class="action-text">创建活动</div>
            </div>

            <div class="action-item" @click="$router.push('/event/create')">
              <div class="action-icon create-event">
                <IconifyIconOffline icon="ep:trophy" />
              </div>
              <div class="action-text">创建赛事</div>
            </div>

            <div class="action-item" @click="$router.push('/match/create')">
              <div class="action-icon create-match">
                <IconifyIconOffline icon="ep:medal" />
              </div>
              <div class="action-text">创建比赛</div>
            </div>

            <div class="action-item" @click="$router.push('/user/list')">
              <div class="action-icon user-manage">
                <IconifyIconOffline icon="ep:user" />
              </div>
              <div class="action-text">用户管理</div>
            </div>

            <div class="action-item" @click="$router.push('/order/list')">
              <div class="action-icon order-manage">
                <IconifyIconOffline icon="ep:shopping-cart" />
              </div>
              <div class="action-text">订单管理</div>
            </div>

            <div class="action-item" @click="$router.push('/system/report')">
              <div class="action-icon report">
                <IconifyIconOffline icon="ep:data-analysis" />
              </div>
              <div class="action-text">数据报表</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card class="recent-activities-card">
          <template #header>
            <span>最新动态</span>
          </template>
          <div class="recent-activities">
            <div
              v-for="activity in recentActivities"
              :key="activity.id"
              class="activity-item"
            >
              <div class="activity-avatar">
                <el-avatar :size="32" :src="activity.avatar" />
              </div>
              <div class="activity-content">
                <div class="activity-text">{{ activity.text }}</div>
                <div class="activity-time">{{ activity.time }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import { IconifyIconOffline } from "@/components/ReIcon";

// 响应式数据
const userStats = ref({
  total: 12580,
  growth: 12.5
});

const activityStats = ref({
  total: 156,
  growth: 8.2
});

const eventStats = ref({
  total: 42,
  growth: 15.6
});

const revenueStats = ref({
  total: "125,680",
  growth: 22.1
});

const chartPeriod = ref("30d");
const userTrendChart = ref();
const activityTypeChart = ref();

const recentActivities = ref([
  {
    id: 1,
    avatar:
      "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
    text: "张三 报名参加了春季篮球赛",
    time: "2分钟前"
  },
  {
    id: 2,
    avatar:
      "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
    text: "李四 创建了新的羽毛球俱乐部",
    time: "5分钟前"
  },
  {
    id: 3,
    avatar:
      "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
    text: "王五 完成了订单支付",
    time: "10分钟前"
  },
  {
    id: 4,
    avatar:
      "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
    text: "赵六 发布了新的赛事资讯",
    time: "15分钟前"
  }
]);

// 初始化用户趋势图表
const initUserTrendChart = () => {
  const chart = echarts.init(userTrendChart.value);
  const option = {
    tooltip: {
      trigger: "axis"
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["01-01", "01-02", "01-03", "01-04", "01-05", "01-06", "01-07"]
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        name: "新增用户",
        type: "line",
        stack: "Total",
        smooth: true,
        data: [120, 132, 101, 134, 90, 230, 210],
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(64, 158, 255, 0.3)"
            },
            {
              offset: 1,
              color: "rgba(64, 158, 255, 0.1)"
            }
          ])
        }
      }
    ]
  };
  chart.setOption(option);
};

// 初始化活动类型分布图表
const initActivityTypeChart = () => {
  const chart = echarts.init(activityTypeChart.value);
  const option = {
    tooltip: {
      trigger: "item"
    },
    series: [
      {
        name: "活动类型",
        type: "pie",
        radius: "50%",
        data: [
          { value: 35, name: "篮球" },
          { value: 28, name: "羽毛球" },
          { value: 20, name: "足球" },
          { value: 12, name: "网球" },
          { value: 5, name: "其他" }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  };
  chart.setOption(option);
};

onMounted(() => {
  nextTick(() => {
    initUserTrendChart();
    initActivityTypeChart();
  });
});
</script>

<style scoped lang="scss">
.dashboard-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-2px);
  }
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  margin-right: 16px;

  &.user-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }

  &.activity-icon {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  }

  &.event-icon {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  }

  &.revenue-icon {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  }
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin: 4px 0;
}

.stat-change {
  font-size: 12px;

  &.positive {
    color: #67c23a;
  }

  &.negative {
    color: #f56c6c;
  }
}

.chart-card {
  height: 400px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.chart-container {
  height: 320px;
}

.quick-actions-card {
  height: 400px;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 10px 0;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 8px;
  background: #f8f9fa;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: #e9ecef;
    transform: translateY(-2px);
  }
}

.action-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  margin-bottom: 8px;

  &.create-activity {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }

  &.create-event {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  }

  &.create-match {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  }

  &.user-manage {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  }

  &.order-manage {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  }

  &.report {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  }
}

.action-text {
  font-size: 14px;
  color: #303133;
  text-align: center;
}

.recent-activities-card {
  height: 400px;
}

.recent-activities {
  max-height: 320px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }
}

.activity-avatar {
  margin-right: 12px;
}

.activity-content {
  flex: 1;
}

.activity-text {
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
}

.activity-time {
  font-size: 12px;
  color: #909399;
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 10px;
  }

  .quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-card {
    margin-bottom: 16px;
  }
}
</style>
